<template>
  <div class="incomeTracking">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">收入保有-分区域</div>
      </div>
    </div>
    <div class="content" style="margin-top:3px">
      <div class="fenqy">
        <div class="operation">
          <el-form :inline="true" :model="form" label-width="80px" class="formList">
            <el-form-item label="选择区域">
              <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
              <!-- <el-select v-model="form.areaId" placeholder="选择区域" @change="areaChange($event)">
            <el-option
              v-for="item in areaList"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
              </el-select>-->
            </el-form-item>
            <el-form-item label="账期">
              <el-date-picker
                v-model="form.month"
                value-format="yyyyMM"
                type="month"
                placeholder="选择月"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="客户群" label-width="60" style="width: 14%;">
              <el-select v-model="form.cGroup" style="width: 100px;">
                <el-option
                  v-for="item in groups"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户分类" label-width="60" style="width: 37%;text-align: right;">
              <el-select v-model="form.cType" style="width: 150px;">
                <el-option
                  v-for="item in types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-button
                size="small"
                type="primary"
                @click="submitHandle"
                style="margin-left: 60px"
              >查询</el-button>
              <el-button size="small" type="orange" @click="exportExcel(false)">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
        <p class="g-unit">单位: 万元</p>
        <div style="border-bottom:1px solid #EBEEF5;" class="tableBox">
          <el-table
            border
            stripe
            v-loading="tableLoading"
            :data="tableData"
            style="width: 100%"
            class="tableTh28"
            height="65vh"
            ref="table"
          >
            <!--    :span-method="arraySpanMethod"     -->
            <el-table-column fixed prop="areaName" label="本地网" width="60px"></el-table-column>

            <!--    label="主营业务收入" -->
            <el-table-column label="收入保有率完成" class-name="third-title">
              <el-table-column
                v-for="(item, index) in title1"
                :key="index"
                class-name="right-money"
                :prop="item.horizonIndexId"
                :label="item.horizonIndexName"
                min-width="140"
              ></el-table-column>
            </el-table-column>
            <el-table-column min-width="110px" label="本年收入环比" prop class-name="third-title">
              <el-table-column
                v-for="(item, index) in title2"
                :key="index"
                class-name="right-money"
                :prop="item.horizonIndexId"
                :label="item.horizonIndexName"
                min-width="100px"
              ></el-table-column>
            </el-table-column>
            <el-table-column label="去年收入环比" min-width="110px" prop class-name="third-title">
              <el-table-column
                v-for="(item, index) in title3"
                :key="index"
                class-name="right-money"
                :prop="item.horizonIndexId"
                :label="item.horizonIndexName"
                min-width="100px"
              ></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSessionStorage } from "@/common/js/storage";
import { getCookie, setCookie } from "@/common/js/cookie";
import { mergeSpan } from "@/utils/mixin.js";
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI";
export default {
  name: "incomeKeepRegional",
  data() {
    return {
      form: {
        areaId: "",
        month: "",
        startDate: "",
        endDate: "",
        cGroup: "1",
        cType: "1",
      },
      accountInfo: "",
      tableLoading: false,
      tableData: [],
      count: "",
      title1: [],
      title2: [],
      title3: [],
      groups: [
        {
          value: "1",
          label: "总体",
        },
        {
          value: "2",
          label: "政企",
        },
        {
          value: "3",
          label: "公众",
        },
      ],
      types: [
        {
          value: "1",
          label: "存量",
        },
        {
          value: "2",
          label: "存存量",
        },
        {
          value: "3",
          label: "存增量",
        },
      ],
    };
  },
  created() {
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.init();
    // this.getCompanyByLvl();
  },
  methods: {
    // 初始化
    init() {
      // this.getCompanyByLvl();
      this.getMarketMonth();
      // this.submitHandle();
    },
    getMarketMonth() {
      let areaId = this.form.areaId
        ? this.form.areaId
        : this.accountInfo.areaId;

      $budgetAPI.incomeKeepRegionalMonth(
        {},
        (res) => {
          if (res || res.code == 0) {
            this.form.month = res.content;
            this.getData(areaId, res.content);
          }
        },
        (err) => {}
      );
    },
    submitHandle() {
      let areaId = this.form.areaId
        ? this.form.areaId
        : this.accountInfo.areaId;
      let month = this.form.month
        ? this.form.month
        : this.formatDate(new Date());
      this.getData(areaId, month);
    },
    getData(areaId, month) {
      let that = this;

      that.tableLoading = true;
      // findNewIncomeTrendBySource
      $budgetAPI.incomeKeepRegional(
        {
          areaId: areaId,
          acctMonth: month,
          cGroup: that.form.cGroup,
          cType: that.form.cType,
          token: getCookie("token"),
        },
        (res) => {
          that.tableLoading = false;
          if (res.code === 0) {
            let content = res.content;
            content.data.map((it) => {
              it.dataList.map((item, i) => {
                it[item.horizonIndexId] = item.indexValue;
              });
            });
            that.title1 = res.content.titles.slice(0, 10);
            that.title2 = res.content.titles.slice(10, 13);
            that.title3 = res.content.titles.slice(13, 16);
            that.tableData = content.data;
          } else {
            that.alertError(res);
          }
          that.$nextTick(() => {
            that.$refs.table.doLayout();
          });
        },
        (err) => {
          that.tableLoading = false;
        }
      );
    },
    //分产品导出
    exportExcel() {
      let areaId = "";
      if (this.form.areaId) {
        areaId = this.form.areaId;
      } else {
        areaId = this.accountInfo.areaId;
      }
      // if (this.form.year) {
      //   year = this.form.year;
      // } else {
      //   year = this.formatDate(new Date());
      // }

      let month = this.form.month,
        cGroup = this.form.cGroup,
        cType = this.form.cType;

      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc +
          "/api/customerAnalysis/exportData?areaId=" +
          areaId +
          "&acctMonth=" +
          month +
          "&cGroup=" +
          cGroup +
          "&cType=" +
          cType +
          "&token=" +
          getCookie("token");
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp +
          "/api/customerAnalysis/exportData?areaId=" +
          areaId +
          "&acctMonth=" +
          month +
          "&cGroup=" +
          cGroup +
          "&cType=" +
          cType +
          "&token=" +
          getCookie("token");
      }
    },
    //获取当前时间
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y;
    },
    //区域选择 返回ID和name
    areaChange(event) {
      let temp = this.areaList.find((item) => {
        return (item.areaId = event);
      });
      this.form.areaName = temp.areaName;
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.export {
  width: 27%;
  text-align: right;
}
/deep/ .el-table .cell {
  text-align: center;
}
</style>
